<template>
  <view>
    <view class="fixed-entry" @click.native="onToAdd">
      <u-icon name="edit-pen" />
      <view class="text">发贴</view>
    </view>

    <u-popup :show="popupShow" round="10" bg-color="#F5F5F5" :safe-area-inset-bottom="false" @close="popupShow = false">
      <view class="popup-content">
        <view class="title">参与话题</view>
        <view class="desc">内容将发布至选择的话题中</view>
        <view class="topic-wrap">
          <view v-for="(item, index) in topicList" :key="index" class="topic-item">
            <view class="left">
              <u-image :src="getImgUrl(item.image)" radius="10" width="80" height="80" />
              <view class="info">
                <view class="name">{{ item.name }}</view>
                <view class="count">已有{{ item.share_num }}人分享内容</view>
              </view>
            </view>
            <view class="release-btn">
              <u-button text="发布" color="#78ffe6" size="mini" @click="onRelease(item)" />
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  wx_talk_subject_list
} from '../../api/index.js'
import {
  getImg
} from '../../utils/index.js'
import {
  mapActions
} from 'vuex'
export default {
  name: 'FixEntry',
  props: {
    from: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      popupShow: false,
      topicList: []
    }
  },
  mounted() {
    this.getTopicList()
  },
  methods: {
    ...mapActions(['setTopicDetail']),
    onToAdd() {
      if (this.from === '1') {
        this.popupShow = true
      } else {
        this.$emit('release')
      }
    },
    onRelease(data) {
      this.setTopicDetail(data)
      this.$utils.navigateToPage('/pagesTopic/detail')
      this.popupShow = false
    },
    getImgUrl(imgId) {
      return getImg(imgId)
    },
    async getTopicList() {
      const {
        talk_list
      } = await wx_talk_subject_list()
      this.topicList = talk_list
    }
  }
}
</script>

<style lang="scss" scoped>
	.fixed-entry {
		z-index: 999;
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
		@include flex-center;
		flex-flow: column;
		background-color: #FFF36D;
		font-size: 20rpx;
		position: fixed;
		right: 20rpx;
		bottom: 200rpx;
	}

	.popup-content {
		height: 60vh;
		padding: 20rpx;
		display: flex;
		flex-flow: column;
		gap: 15rpx;

		.title {
			font-size: 32rpx;
			font-weight: bolder;
		}

		.desc {
			color: #999;
			font-size: 26rpx;
		}

		.topic-wrap {
			flex: 1;
			overflow: hidden;
			overflow-y: auto;
			padding-top: 20rpx;

			.topic-item {
				padding: 20rpx 10rpx;
				margin-bottom: 15rpx;
				@include flex-between;
				gap: 10rpx;
				border-radius: 10rpx;
				background-color: #FFF;

				.left {
					flex: 1;
					@include flex-column-center;
					gap: 20rpx;

					.info {
						flex: 1;

						.name {
							font-size: 30rpx;
							font-weight: bolder;
							@include text-ellipsis;
							margin-bottom: 50rpx;
						}

						.count {
							font-size: 26rpx;
							color: #b9b9b9;
						}
					}
				}

				.release-btn {
					width: 120rpx;

					::v-deep.u-button {
						width: 100%;
					}
				}
			}
		}
	}
</style>
